<template>
	<view class="content">
		<view class="base-page-bg-img"><image class="img" src="/static/image/hszg.png" mode="aspectFit"></image></view>
		<view v-if="false" class="quick-login">
			<view class="phone">166****8888</view>
			<view class="service">中国xxx提供认证服务</view>
			<button class="btn1">使用本机号码</button>
			<button class="btn2">使用其他号码</button>
		</view>
		<view v-else class="phone-login">
			<view class="title">手机号登录</view>
			<view class="input-item">
				<input class="input" v-model="phone" type="tel" placeholder="请输入您的手机号" @blur="appLoginCaptchaImage()" />
			</view>
			<view class="input-item">
				<input class="input" v-model="imgCode" type="text" placeholder="请输入图形验证码" />
				<image @click="appLoginCaptchaImage" class="img-code" :src="loginImgCode" mode=""></image>
			</view>
			<view class="input-item">
				<input class="input" v-model="code" type="number" placeholder="请输入验证码" text-content-type="oneTimeCode" />
				<button class="code-btn" :class="{'out': !isGetCode}" @click="getCode">{{codeText}}</button>
			</view>
			<button class="btn1" @click="submit">立即登录</button>
		</view>
		<view class="protocol">
			<view class="radio" :class="{'on': radio}" @click="radioClick"><view class="iconfont icon-duigou"></view></view>
			<view class="text">
				我已阅读并同意<text class="pro" @click="goProtocol('fwxy')">《服务协议》</text>和<text class="pro" @click="goProtocol('yszc')">《隐私政策》</text>，未注册的手机号验证成功后将自动注册
			</view>
		</view>
		
		<view class="ai-modal" v-if="aiModalShow">
			<view class="shadow"></view>
			<view class="modal-content">
				<view class="title">隐私政策</view>
				<view class="text">本应用尊重并保护所有用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本应用会按照隐私政策的规定使用和披露您的个人信息。可阅读 <view class="xy" @click="goProtocol('fwxy')">服务协议</view> 和 <view class="xy" @click="goProtocol('yszc')">隐私政策</view>。</view>
				<view class="btn" @click="confirm" style="margin: 46rpx 0;">确定</view>
				<view class="btn" @click="exit">不同意并退出APP</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {appLoginCaptchaImage,sendPhoneCode,loginByPhone} from '@/api/index.js'
	export default{
		data() {
			return {
				phone: '',
				imgCode: '',
				code: '',
				isGetCode: true,
				codeText: '获取验证码',
				loginImgCode: '',
				codeTime: null,
				radio: false,
				aiModalShow: false,
			}
		},
		onLoad() {
			const aiModalShow=uni.getStorageSync('aiModalShow');
			this.aiModalShow=aiModalShow!='1';
		},
		methods: {
			confirm(){
				uni.setStorageSync('aiModalShow','1');
				this.aiModalShow=false;
			},
			exit(){
				// #ifdef APP-PLUS
				const platform = uni.getSystemInfoSync().platform
				if (platform === 'android') {
					// Android 平台
					plus.runtime.quit()
				} else if (platform === 'ios') {
					// iOS 平台 - 注意：iOS 不允许程序退出，这里只是最小化
					plus.ios.import('UIApplication').sharedApplication().performSelector('suspend')
				}
				// #endif
				this.aiModalShow=false;
			},
			radioClick(){
				this.radio=!this.radio
			},
			goProtocol(t){
				uni.navigateTo({
					url: `/pagesB/login/protocol?type=${t}`
				})
			},
			// 获取图形验证码
			appLoginCaptchaImage(){
				if(this.phone.length!=11){
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				appLoginCaptchaImage({phone: this.phone}).then(res=>{
					console.log(res,'---61')
					let base64 = uni.arrayBufferToBase64(res);
					this.loginImgCode = "data:image/png;base64," + base64;
				})
			},
			// 校验
			submitVerify(){
				const reg = /^1[3-9]\d{9}$/; 
				if(this.$common.isEmpty(this.phone)){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return false
				}else if(!reg.test(this.phone)){
					uni.showToast({
						title: '请输入有效的手机号',
						icon: 'none'
					})
					return false
				}else if(this.$common.isEmpty(this.imgCode)){
					uni.showToast({
						title: '请输入图形验证码',
						icon: 'none'
					})
					return false
				}
				return true
			},
			// 获取验证码
			getCode(){
				if(!this.submitVerify() && !this.isGetCode) return;
				sendPhoneCode({phone: this.phone, code: this.imgCode,isErr: true}).then(res=>{
					this.isGetCode=false;
					let time=60;
					this.codeTime=setInterval(()=>{
						--time
						this.codeText=time+'秒后可重发';
						if(time<=1){
							this.isGetCode=true;
							this.codeText='获取验证码';
							clearInterval(this.codeTime)
						}
					},1000)
					console.log(res,'---49')
				}).catch(err=>{
					this.appLoginCaptchaImage();
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
			// 登录
			submit(){
				if(!this.submitVerify()) return;
				if(!this.radio){
					return uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					})
				}
				loginByPhone({phone: this.phone,code: this.code}).then(res=>{
					console.log(res,'---')
					if(res?.data?.token){
						this.$store.commit('updateToken', res?.data?.token);
					}else if(res?.data?.openid){
						this.$store.commit('set', ['loginInfo','']);
						this.$store.commit('set', ['token','']);
					}
					if(res?.data?.openid){
						this.$store.commit('updateOpenid', res?.data?.openid);
					}
					if(res?.data?.user){
						if(!res?.data?.openid){
							this.$store.commit('set', ['openid','']);
						}
						this.$store.commit('updateLoginInfo', res?.data?.user);
						this.$store.dispatch('getKeMu');
					}
					const keMuIndex=this.$store.state.keMuIndex;
					if(this.$common.isEmpty(keMuIndex)){//没选过科目，强制选
						uni.reLaunch({
							url: `/pages/cutDrawer/index`
						})
					}else{
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				})
			}
		},
		onUnload(){
			clearInterval(this.codeTime)
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-top: 165rpx;
		background: linear-gradient( 180deg, #CAE3FF 0%, #FFFFFF 34%, #FFFFFF 100%);
	}
	.quick-login{
		text-align: center;
		.phone{
			font-size: 68rpx;
			color: #222;
		}
		.service{
			margin-bottom: 98rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	.btn1,.btn2{
		width: 646rpx;
		height: 86rpx;
		padding: 0;
		line-height: 86rpx;
		font-size: 32rpx;
		border-radius: 6rpx;
		&::after{
			display: none;
		}
	}
	.btn1{
		margin-bottom: 52rpx;
		background-color: #42B8BC;
		color: #fff;
	}
	.btn2{
		border: 2rpx solid #DADADA;
		background-color: #fff;
		color: #444;
	}
	.protocol{
		position: fixed;
		align-items: flex-start;
		bottom: 74rpx;
		left: 80rpx;
		right: 64rpx;
		display: flex;
		.radio{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			width: 28rpx;
			height: 28rpx;
			margin-right: 8rpx;
			transform: translateY(4rpx);
			cursor: pointer;
			border-radius: 50%;
			border: 2rpx solid #999;
			color: #fff;
			&.on{
				background-color: #42B8BC;
				border: none;
			}
			.iconfont{
				font-size: 18rpx;
			}
		}
		.text{
			font-size: 24rpx;
			color: #999;
		}
		.pro{
			color: #4779DE;
		}
	}
	.phone-login{
		padding: 30rpx 52rpx 0;
		.title{
			margin-bottom: 92rpx;
			font-size: 44rpx;
			font-weight: 600;
			color: #222;
		}
		.input-item{
			display: flex;
			margin-bottom: 40rpx;
			border-radius: 6rpx;
			background-color: #F1F5F6;
		}
		.input{
			flex: 1;
			height: 86rpx;
			padding-left: 44rpx;
			font-size: 36rpx;
			color: #333;
		}
		::v-deep .input-placeholder{
			font-size: 32rpx;
			color: #C5C9CA;
		}
		.code-btn{
			padding: 0 30rpx;
			line-height: 86rpx;
			font-size: 28rpx;
			color: #42B8BC;
			background: none;
			&::after{
				display: none;
			}
			&.out{
				color: #C5C9CA;
			}
		}
		.btn1{
			margin-top: 56rpx;
		}
	}
	.img-code{
		flex-shrink: 0;
		height: 86rpx;
		width: 200rpx;
	}
	.ai-modal{
		position: fixed;
		z-index: 111111;
		display: flex;
		justify-content: center;
		align-items: center;
		&,.shadow{
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
		.shadow{
			position: absolute;
			background-color: rgba(0,0,0,.65);
		}
		.modal-content{
			position: relative;
			z-index: 1;
			width: 562rpx;
			padding: 38rpx 50rpx 74rpx;
			text-align: center;
			border-radius: 20rpx;
			background-color: #fff;
		}
		.title{
			margin-bottom: 24rpx;
			color: #333;
			font-size: 38rpx;
			font-weight: 600;
		}
		.text{
			margin-bottom: 34rpx;
			line-height: 40rpx;
			text-align: left;
			color: #565656;
			font-size: 32rpx;
			&.success{
				color: #FCBE6F;
			}
		}
		.btn{
			height: 72rpx;
			line-height: 72rpx;
			background-color: #FCBE6F;
			font-size: 34rpx;
			font-weight: bold;
			color: #fff;
			border-radius: 44rpx;
		}
		.xy{
			display: inline-block;
			color: #378CFF;
			text-decoration: underline;
		}
	}
</style>